<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>

    <link rel="stylesheet"    th:href="@{assets/css/new-subject-coupon.css}"/>
    <link rel="shortcut icon" th:href="@{assets/images/Shop.ico}"/>
    <link rel="stylesheet"    th:href="@{assets/css/style.min.css}"/>
    <link rel="stylesheet"    th:href="@{assets/css/plugins/plugins.min.css}"/>
    <link rel="stylesheet"    th:href="@{assets/css/plugins/plugins.min.css}"/>
    <link rel="stylesheet"    th:href="@{assets/css/style.min.css}"/>
    <script th:src="@{assets/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.css}">
    <script crossorigin="anonymous"
            integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            th:src="@{https://lib.baomitu.com/jquery/3.6.0/jquery.js}"></script>
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.css}">
    <style>
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
<!--//头-->
<div th:replace="header::headerS"></div>

<!--//商品列表-->
<div class="section section-margin" th:fragment="productList">
    <h1 style="text-align: center; font-weight: bold" th:text="${categoryName}"></h1>
    <br>
    <br>
    <div class="container">
        <div class="row flex-row-reverse">
            <div class="row shop_wrapper grid_3" id="productListContainer">
                <div style="text-align: center" th:each="product : ${products}" class="productDetail col-lg-3 col-md-3 col-sm-6 product">
                    <div class="product-inner">
                        <div class="thumb">
                            <a th:href="@{'ywt-product?id='+${product.id}}"  class="image">
                                <img style="height: 240px;width:220px"
                                     class="first-image" th:src="${product.pic}"
                                     alt="Product" src=""/>
                            </a>
                        </div>
                        <div class="content">
                            <h5 class="title"><a th:href="@{'ywt-product?id='+${product.id}}" th:text="${product.name}"></a></h5>
                            <span class="price">
                                            <span class="new" th:text="${'￥'+product.price}"></span>
                                    </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Shop Wrapper End -->
        </div>
    </div>
</div>

<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>
<script th:src="@{assets/js/main.js}"></script>

<script>
    if(document.getElementsByClassName("productDetail").length===0){
        document.getElementById("productListContainer").innerHTML+=
            "<h3 style='text-align: center'>暂无商品</h3>";
    }
</script>
</body>
</html>